﻿<template>
    <div style="width: 100%">
        <content-edit
            v-for="item in items"
            :key="item"
            :ctype="item[typeField]"
            v-model="item[contentField]"
            @remove="onRemove(item)"
            :maxFile="maxFile"
            :maxPhoto="maxPhoto"
            :disabled="disabled"
            :modelName="modelName"
            :fileAccept="fileAccept"
            v-bind="$attrs"
        ></content-edit>

        <el-space :size="10" v-if="!disabled">
            <el-button type="primary" v-if="allowText" @click="onAdd(1)"
                >新增文本</el-button
            >
            <el-button type="primary" v-if="allowPhoto" @click="onAdd(2)"
                >新增图片</el-button
            >
            <el-button type="primary" v-if="allowFile" @click="onAdd(3)"
                >新增附件</el-button
            >
            <el-button type="primary" v-if="allowVideo" @click="onAdd(4)"
                >新增视频</el-button
            >
        </el-space>
    </div>
</template>


<script>
import { watch } from "vue";

export default {
    name: "MyContent3",
    emits: ["update:modelValue"],
    props: {
        modelValue: {
            type: [Array, String],
        },
        disabled: Boolean,
        maxText: {
            type: Number,
            default: 1,
        },
        maxFile: {
            type: Number,
            default: 1,
        },
        maxPhoto: {
            type: Number,
            default: 3,
        },
        modelName: String,
        allowText: {
            type: Boolean,
            default: true,
        },
        allowPhoto: {
            type: Boolean,
            default: true,
        },
        allowFile: {
            type: Boolean,
            default: true,
        },
        allowVideo: {
            type: Boolean,
            default: false,
        },
        fileAccept: {
            type: String,
        },
        typeField: {
            type: String,
            default: "ContentType",
        },
        contentField: {
            type: String,
            default: "Content",
        },
    },
    data() {
        return {
            items: [],
        };
    },
    created() {
        this.makeItems();
    },
    methods: {
        onAdd(ctype) {
            if (this.disabled) return;
            let item = {};
            item[this.typeField] = ctype;
            item[this.contentField] = "";
            let newitmes = this.items.map((p) => p);
            newitmes.push(item);
            this.items.push(item);
        },
        onRemove(item) {
            if (this.disabled) return;
            var ix = this.items.indexOf(item);
            this.items.splice(ix, 1);
        },
        makeItems() {
            if (this._stopHandle) {
                this._stopHandle();
                this._stopHandle = null;
            }
            try {
                if (!this.modelValue) {
                    this.items = [];
                } else if (Array.isArray(this.modelValue)) {
                    this.items = this.modelValue.filter((p) => p != undefined);
                } else if (typeof this.modelValue == "string") {
                    this.items = JSON.parse(this.modelValue);
                }
            } finally {
                this._stopHandle = watch(this.items,
                    (val) => {
                        this.update2Model();
                    },
                    { deep: true, once: true }
                );
            }
        },
        update2Model() {
            if (this.disabled) return;
            if (Array.isArray(this.modelValue)) {
                this.$emit("update:modelValue", this.items);
            } else {
                var s1 = JSON.stringify(this.items);
                this.$emit("update:modelValue", s1);
            }
        },
    },
    watch: {
        modelValue() {
            this.makeItems();
        },
    },
};
</script>